<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>营销号生成器</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        *{
            margin: 0 auto;
        }
        body{
            background-color: #343a40;
        }
        .container{
            position: relative;
            top: 50px;
            bottom:100px;
        }
        h1{
            color: #007bff;
            font-size: 45px;
            font-family: Kaiti;
            text-align: center;
        }
        .modal-dialog{
            max-width: 100% !important;
        }
        .modal-content{
            background:rgba(0,0,0,0.3);
            width: 700px;
        }
        .loginForm{
            width: 600px;
            text-align: center;
        }
        label{
            color:#fff;
            font-size:22px;
            font-family: Kaiti;
        }
        .loginForm .form-group{
            margin: 30px 0;
        }
        .loginForm .form-group .form-control{
            height: 40px;
            font-size: 15px;
            width:400px;
            padding-left:10px;
            border-radius: 8px;
        }
        .btn-primary{
            background-color: #3e4963;
            border: 0px solid transparent;
            width: 550px;
            height: 50px;
            font-size: 24px;
            font-family: STKaiti;
        }
        textarea{
            margin-bottom:30px;
            width: 540px;
            height: 200px;
            font-size:18px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="modal-dialog" id="login_form">
        <div class="modal-content">
            <div class="modal-title">
                <h1 style="text-align: center;font-family: STKaiti;font-weight: bold;">营销号生成器</h1>
            </div>
            <div class="modal-body index-news-list" id="index-news-list-1">
                <form action="javascript:void(0);" class="loginForm" id="">
                    <div class="form-group">
                        <label>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;体：</label>
                        <input class="form-control required" id="subject" type="text" placeholder="营销号" required>
                    </div>
                    <div class="form-group">
                        <label>事&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</label>
                        <input class="form-control required" id="event" type="text" placeholder="自动生成" required>
                    </div>
                    <div class="form-group">
                        <div class="form-group">
                            <label>另一种说法：</label>
                            <input class="form-control required" id="another" type="text" placeholder="营销号文案自动生成器" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" type="submit" onclick="submitForm()">生成</button>
                    </div>
                </form>
            </div>

            <div class="modal-body index-news-list loginForm" id="index-news-list-1">
                <textarea id="result"></textarea>
            </div>

        </div>
        <div id="bdtts_div_id">
            <audio id="tts_autio_id" autoplay="autoplay"></audio>
        </div>
    </div>
</div>

<script>
    function submitForm(){
        subject = $("#subject").val();	//主体
        event = $("#event").val();		//事件
        another = $("#another").val();	//另一种说法
        if(subject.length==0 || event.length==0 || another.length==0){
            return;
        }
        //最终结果
        result = '　　小伙伴们，大家好呀，今天小编来跟大家聊聊'+subject+event+'。说起'+subject+'相信大家都很熟悉，'+subject+'是我们经常都会遇到的，但是'+subject+event+'是怎么回事呢，下面就让小编带大家一起了解吧。\r\n　　'+subject+event+'其实就是'+another+'，大家可能会非常惊讶，'+subject+'怎么会'+event+'呢？但事实就是这样，小编也感到非常惊讶。\r\n　　好了，以上就是关于'+subject+event+'的事情了，不知道大家有什么想法呢，欢迎在评论区留言，和小编一起讨论哟~'
        //显示最终结果
        document.getElementById("result").value = result;

        var ttsDiv = document.getElementById('bdtts_div_id');
        var ttsAudio = document.getElementById('tts_autio_id');
        //实现语音播报
        ttsDiv.removeChild(ttsAudio);
        var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
        //调用百度语音接口，朗读最终结果
        var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&pre=0&spd=7&text='+result+'" type="audio/mpeg">';
        var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
        var au2 = '</audio>';
        ttsDiv.innerHTML = au1 + sss + eee + au2;
        ttsAudio = document.getElementById('tts_autio_id');
        ttsAudio.play();
    }
</script>
</body>
</html>